<template>
  <h1>一个人的信息</h1>
  <!-- vue3发现name age 是refImpl引用对象后 会自动读取value值 所以不用写成 name.value 或 age.value -->
  <h2>姓名:{{ person.name }}</h2>
  <h2>年龄:{{ person.age }}</h2>
  <h2>工作种类:{{ person.job.type }}</h2>
  <h2>工作薪资:{{ person.job.salary }}</h2>
  <h2>爱好:{{ person.hobby }}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {reactive} from 'vue'

export default {
  name: 'App',

  setup: function () {


    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        type: "前端工程师",
        salary: '30K'
      },
      hobby: ['抽烟', '喝酒', '汤头']

    })

    function changeInfo() {
      person.name = '李四'
      person.age = 19
      person.job.type = '后端'
      person.job.salary = '40K'
      person.hobby[0] = 'xuexi'

    }


    //返回一个函数（常用）
    return {
      person: person,
      changeInfo: changeInfo


    }
  }
}
</script>


